<template>
    <!-- 主题类型：帖子 -->
    <div class="list-note-component-item">
        <div class="list-note-component-head">
            <div class="list-note-component-head-channel">{{info.content.quanzi.topic_title}}</div>
            <!--<div class="list-note-component-head-name">#{{info.content.title}}#</div>-->
            <div class="clearBoth"></div>
        </div>
        <div v-if="info.content.post_type=='article'">
            <a :href="info.content.share_url" class="list-note-component-title">{{info.content.title}}</a>
            <a  v-for="(item,index) in info.content.attachs" v-if="item.is_image&&index<=0"
                :href="info.content.share_url" class="list-note-component-img-big" >
                <!-- 大图：用于文章类型 -->
                <img
                      v-lazy="item.thumb + '?x-oss-process=image/resize,w_400'" />
                <div class="clearBoth"></div>
            </a>
            <div class="clearBoth"></div>
            <a href="" class="list-note-component-note">
                <div class="list-note-component-face">
                    <img v-lazy="info.content.user_info.avatar_file + '?x-oss-process=image/resize,w_150'"/>
                </div>
                <div class="list-note-component-info">
                    <div class="list-note-component-name">{{info.content.user_info.user_name}}</div>
                    <div class="list-note-component-time">{{this.toCommonTime(info.content.add_time)}}</div>
                </div>
                <div class="list-note-component-reply">{{info.content.comments}}评论</div>
                <div class="clearBoth"></div>
            </a>
            <div class="clearBoth"></div>
        </div>
        <div v-if="info.content.post_type=='question'">
            <a :href="info.content.share_url" class="list-note-component-title">{{info.content.question_content}}</a>
            <a :href="info.content.share_url" class="list-note-component-img-triple"
               v-for="(item,index) in info.content.attachs" v-if="(item.is_image==1) && index<=2">
                <!-- 单图或三图：用于问题类型 -->
                <img v-lazy="item.thumb + '?x-oss-process=image/resize,w_150'"/>
            </a>
            <div class="clearBoth"></div>
            <router-link class="list-note-component-note"
                         :to="{name: 'Index', params: {'channelid': info.content.quanzi.channel_id}}">
                <div class="list-note-component-face">
                    <img v-lazy="info.content.user_info.avatar_file + '?x-oss-process=image/resize,w_150'"/>
                </div>
                <div class="list-note-component-info">
                    <div class="list-note-component-name">{{info.content.user_info.user_name}}</div>
                    <div class="list-note-component-time">{{this.toCommonTime(info.content.update_time)}}</div>
                </div>
                <div class="list-note-component-reply">{{info.content.answer_count}}回复</div>
                <div class="clearBoth"></div>
            </router-link>
            <div class="clearBoth"></div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        }
    }
</script>

<style>
    .list-note-component-item {
        padding: 0.4rem 0;
        margin: 0.4rem auto;
        border-bottom: 0.06rem solid #EDEDED;
    }

    .list-note-component-head {
        font-size: 12px;
        color: #06D5C4;
        margin: 0.1rem auto;
    }

    .list-note-component-head-channel {
        max-width: 47%;
        float: left;
        display: inline-block;
        border: 0.06rem solid #06D5C4;
        padding: 0.1rem 1%;
        border-radius: 0.8rem;
        line-height: 1.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-note-component-head-name {
        display: inline-block;
        float: left;
        max-width: 49%;
        margin-left: 2%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-note-component-title {
        display: block;
        font-size: 1.0rem;
        line-height: 1.4rem;
        color: #444444;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /* white-space: nowrap; */
    }

    .list-note-component-img-big {
        display: block;
        width: 100%;
        margin: 0.3rem auto;
        padding-bottom: 40%;
        /*float: left;*/
        position: relative;
    }

    .list-note-component-img-triple {
        width: 32.333%;
        margin: 0.3rem 0.5%;
        padding-bottom: 32.333%;
        float: left;
        position: relative;
    }

    .list-note-component-img-big img,
    .list-note-component-img-triple img {
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
    }

    .list-note-component-note {
        display: block;
        margin: 0.6rem auto;
    }

    .list-note-component-face {
        width: 39px;
        float: left;
    }

    .list-note-component-face img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: cover;
    }

    .list-note-component-info {
        float: left;
        color: #787878;
    }

    .list-note-component-name {
        font-size: 0.8rem;
        line-height: 1.2rem;
    }

    .list-note-component-time {
        font-size: 0.8rem;
        line-height: 1.0rem;
    }

    .list-note-component-reply {
        float: right;
        font-size: 12px;
        line-height: 1.0rem;
        color: #787878;
    }
</style>